<template>
  <div class="image-panel-wrapper">
      <div class="image-panel-box">
          <div class="image-panel__pagination">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next, sizes"
                :page-sizes="[10, 20, 30, 50]"
                :total="total">
            </el-pagination>
          </div>
          <div class="image-panel__body">
              <div
                v-for="(item) in list"
                :key="item.uid"
                class="image-panel-item"
              >
                <i class="el-icon-close material-delete" @click="deleteMaterial(item)" />
                <img :src="`${item.uri}?vframe/jpg/offset/1`" />
                <div class="material-flag-box">
                    <el-tag
                        type="info"
                        size="mini"
                        v-for="flag in item.flag"
                        :key="flag"
                        effect="dark"
                        class="material-tag-item"
                    >{{flag}}</el-tag>
                    <i class="el-icon-video-play video-play" @click="playVideo(item)"></i>
                </div>
              </div>
          </div>
      </div>
      <div
        class="video-player-box"
        v-if="showVideo && video !== null"
      >
        <i class="el-icon-close player-close" @click="closeVideoPlayer"></i>
        <div class="player-mask"/>
          <video
            class="video-player"
            :src="`${video.uri}?${new Date().getTime()}`"
            controls
            preload
            :cache="false"
        />
      </div>
      
  </div>
</template>

<script>
import axios from 'axios';
export default {
    props: ['keyword'],
    data() {
        return {
            list: [],
            total: 0,
            pageSize: 20,
            currentPage: 1,
            showVideo: false,
            video: null,
        };
    },
    created() {
        this.getMaterial();
    },
    methods: {
        playVideo(material) {
            this.video = material;
            this.showVideo = true;
        },
        closeVideoPlayer() {
            this.showVideo = false;
            this.video = null;
        },
        deleteMaterial(material) {
            let message = material.templates.length > 0 ? `当前有${material.templates.length}模板使用该素材!` : '';
            this.$confirm(`${message}此操作将永久删除该文件, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    method: 'post',
                    data: {
                        uid: material.uid,
                    },
                    url: '/api/material/delete'
                }).then((res) => {
                    const { code, msg } = res.data;
                    if (Number(code) === 0) {
                        const materialIndex = this.list.findIndex(vo => vo.uid === material.uid);
                        if (materialIndex >= 0) {
                            this.list.splice(materialIndex, 1);
                        }
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    } else {
                        this.$message.error(msg);
                    }
                });
                
            });
        },
        getMaterial() {
            const { keyword = '', pageSize, currentPage } = this;
            axios({
                url: '/api/material/list',
                method: 'get',
                params: {
                    flag: keyword,
                    pageSize,
                    page: currentPage,
                    meta: 'video',
                },
            }).then(res => {
                const { code, data } = res.data;
                if (Number(code) === 0) {
                    const { docs, page, totalDocs, limit } = data;
                    this.list = docs;
                    this.currentPage = page;
                    this.total = totalDocs;
                    this.pageSize = limit;
                } else {
                    this.$message.error('加载数据失败');
                }
            });
        },
        handleSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getMaterial();
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getMaterial();
        }
    }
}
</script>

<style lang="less" scoped>
.image-panel-wrapper {
    .image-panel-box {
        .image-panel__pagination {
            text-align: right;
        }
        .image-panel__body {
            margin: 20px auto; // 剧中
            columns: 4; // 默认列数
            column-gap: 30px; // 列间距
            .image-panel-item {
                width: 100%;
                break-inside: avoid;
                margin-bottom: 30px;
                position: relative;
                .material-delete {
                    position: absolute;
                    right: 0;
                    top: 0;
                    display: none;
                }
                &:hover .material-delete {
                    display: inline-block;
                }
                img {
                    width: 100%;
                }
                .video-play {
                    position: absolute;
                    left: 0;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    color: #FFF;
                    font-size: 32px;
                    display: none;
                    opacity: 0.6;
                    width: 32px;
                    height: 32px;
                }
                &:hover .video-play {
                    display: inline-block;
                }
                .material-flag-box {
                    text-align: right;
                    overflow: hidden;
                    .material-tag-item {
                        margin: 0 4px;
                        border-radius: 0;
                        &:first-of-type {
                            margin-right: 0;
                        }
                    }
                }
            }
        }
    }
}
.video-player-box {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    .player-mask {
        background: rgba(77, 77, 77, 0.3);
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
    .player-close {
        position: absolute;
        right: 12px;
        top: 12px;
        font-size: 32px;
        color: #FFF;
        z-index: 101;
        font-weight: bold;
    }
    .video-player {
        position: fixed;
        width: 512px;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }
}

</style>